<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <h1>已完成的工作计划</h1>
            <ul>
                <template v-for="plan in plans">
                    <li v-if="plan.isComplete">
                        {{plan.content}}
                    </li>
                </template>
                
            </ul>
            <h1>未完成的工作计划</h1>
            <ul>
                <template v-for="plan in plans">
                    <li v-if="!plan.isComplete">
                        {{plan.content}}
                    </li>
                </template>
            </ul>
        </div>
    
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        const vm = Vue.createApp({
            data() {
                return {
                    plans: [
                        {content: '写《Java无难事》', isComplete: false},
                        {content: '买菜', isComplete: true},
                        {content: '写PPT', isComplete: false},
                        {content: '做饭', isComplete: true},
                        {content: '打羽毛球', isComplete: false}
                    ]
                }
            }
        }).mount('#app');
    </script>
  </body>
</html>